<html>
    <head>
        <title>match-media</title>
    </head>
    <body>
        <script>
            // mathc-media  （媒体查询组件）

                  /*

                        一、概述

                                    media query匹配检测节点

                                    类似于网页开发中"使用媒体查询来适配大屏小屏", match-media 是一个可 "适配不同屏幕" 的基本视图组件。

                                    可以指定一组 media query媒体查询规则，满足查询条件时，这个组件才会被展示。


                        二、平台兼容性

                                    app          h5      微信小程序      支付宝小程序   qq小程序   百度小程序    抖音小程序   飞书小程序   360小程序       快应用        京东小程序  元服务    小红书小程序

                                2.8.12+，        √       基础库             √            √           √          √            ×            ×            ×               ×           ×
                                                         2.11.1+
                                app-vue

                  */  

                  /*
                        三、属性说明

                                    属性名	            类型	    默认值	        必填	    说明

                                1、min-width	      number		                否	    页面最小宽度（ px 为单位）

                                2、max-width	      number		                否	    页面最大宽度（ px 为单位）

                                3、width	          number		                否	    页面宽度（ px 为单位）

                                4、min-height	      number		                否	    页面最小高度（ px 为单位）

                                5、max-height	      number		                否	    页面最大高度（ px 为单位）

                                6、height	          number		                否	    页面高度（ px 为单位）

                                7、orientation	      string		                否	    屏幕方向（ landscape 或 portrait 
                  */

                  /*
                        四、示例

                                以下示例代码，推荐使用HBuilderX ,新建 uni-app 项目，可直接体验完整示例。

                                eg:

                                        <template>
                                            <view>
                                                <match-media :min-width="375" :max-width="800" >
                                                    <view>当页面最小宽度 375px， 页面宽度最大 800px 时显示</view>
                                                </match-media>

                                                <match-media :min-height="400" :orientation="landscape">
                                                    <view>当页面高度不小于 400px 且屏幕方向为横向时展示这里</view>
                                                </match-media>
                                            </view>
                                        </template>
                  */
        </script>
    </body>
</html>